<template>
    <div>
        <el-form label-width="80px" label-position="left" :model="Form" ref="Form">
            <el-form-item label="用户名" prop="username" >
                <el-input v-model="Form.username"></el-input>
            </el-form-item>
            <!-- <el-form-item label="邮箱" prop="email"
              :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                      ]">
                <el-input v-model="Form.email"></el-input>
            </el-form-item> -->
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="Form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="Form.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item> 
                <el-button type="primary" @click="signup">注册</el-button>
                <el-button @click="resetForm('Form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    data() {
        return {
            Form: {
                username: '',
                // email: '',
                password: '',
                checkPass:'',
            }
      };
    },
    methods: {
      resetForm(Form) {
        this.$refs[Form].resetFields();
      },
      signup2(){ 
        console.log(this.Form.username);
        console.log(this.Form.password);
      },
      signup(){
        this.$axios.post("/saveUser",{
            username:this.Form.username,
            password:this.Form.password,
        })
        .then((res)=>{
          console.log(res);
          return res;
        })
        .catch((err)=>{
          console.log(err);
        })

      }
    },
  }

</script>

<style>
    
</style>